<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <!--    引入vue的路由-->
    <script src="../js/vue-router.js"></script>
</head>
<body>
<!--
        路由切换时 如何实现参数传递
           1.querystring     ?username=tom&password=123456
           2.params/path     login/tom/123456           restful        获取get   删除delete     /user/1

-->

<div id="app">
    <h3>路由的切换方式1: 通过a标签实现</h3>
    <p>
        <a href="#/login?username=tom&password=123456">登录</a>
        <a href="#/register/xiaoming/123456">注册</a>
    </p>
    <hr>
    <h3>路由的切换方式2: 通过router-link标签实现 to=""</h3>
    <router-link to="/login?username=tom&password=123456">登录</router-link>
    <router-link to="/register/xiaoming/123456">注册</router-link>

    <hr>
    <h3>路由的切换方式3: 通过router-link标签实现 :to="{path}"</h3>
    <router-link :to="{path:'/login',query:{username:'xiaohei',password:'123456'}}">登录</router-link>
    <router-link :to="{name:'register',params:{username:'xiaohei',password:'123456'}}">注册</router-link>

    <hr>
    <h3>路由的切换方式4: 通过js代码实现路由跳转</h3>
    <button @click="login">登录</button>
    <button @click="register">注册</button>


<!--    路由的出口-->
    <router-view></router-view>
</div>


<script>
    let login = {
        template: `
             <div>
                    <h2>欢迎登录</h2>
                    <form action="#">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="password" placeholder="请输入密码"></p>
                        <p><button>立即登录</button></p>
                    </form>
            </div>
        `,
        created(){
            //  参数会被封装在当前路由对象中
            // console.log(this.$route)
            let {username,password} =  this.$route.query
            console.log(username+":"+password)
        }
    }

    let register = {
        template: `
             <div>
                    <h2>欢迎注册</h2>
                    <form action="#">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="password" placeholder="请输入密码"></p>
                        <p><button>立即注册</button></p>
                    </form>
            </div>
        `,
        created(){
            //  参数会被封装在当前路由对象中
            console.log(this.$route)
            let {username,password} = this.$route.params
            console.log(username+":"+password)
        }

    }
    let filenotfound = {
        template: `
             <div>
                    页面找不到！！！
            </div>
        `
    }

    // 路由列表
    const routes = [
        {
            path:'/login',
            component:login
        },
        {
            path:'/register/:username/:password',
            component:register,
            name:'register'
        },
        {
            path: '/**',
            component: filenotfound
        }
    ]

  //  路由管理对象  管理路由
    const  router = new VueRouter({
        routes
    })

    // 扩充vue的路由功能
    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            login(){
                 this.$router.push("/login?username=xiaoming&password=123456")
            },
            register(){

                this.$router.push({
                    name:'register',
                    params:{username:'xiaohei',password:'123456'}
                })
            }
        },
        router
      })
</script>

</body>
</html>